<template>
  <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body :close-on-click-modal="false"	>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="商品编码" prop="gNumber">
        <el-input
          v-model="queryParams.gNumber"
          placeholder="请输入商品编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="关联商品" prop="assNumber">
        <el-input
          v-model="queryParams.assNumber"
          placeholder="请输入关联商品编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brandIds">
        <el-cascader
          v-model="queryParams.brandIds"
          :options="options.brandOptions"
          :props="{ checkStrictly: true }"
          :show-all-levels="false"
          filter clearable
          placeholder="请选择商品品牌"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="类型" prop="typeIds">
        <el-cascader
          v-model="queryParams.typeIds"
          :options="options.gTypeOptions"
          :props="{ checkStrictly: true }"
          :show-all-levels="false"
          filter clearable
          placeholder="请选择商品类型"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择上架状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_goods_sj_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="display: flex; justify-content: flex-end;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" border fit stripe :data="list" max-height="400px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" align="center" :selectable="isSelectable" />
      <el-table-column label="商品编码" header-align="center" prop="gNumber" width="220" />
      <el-table-column label="商品名称" align="center" prop="goodsName" :show-overflow-tooltip="true" width="220" />
      <el-table-column label="品牌" align="center" prop="brandName" />
      <el-table-column label="类型" align="center" prop="typeName" />
      <el-table-column label="价格" align="center" prop="price" width="130" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <span v-if="scope.row.price" >{{scope.row.price/100}} ￥</span>
        </template>
      </el-table-column>
      <el-table-column label="封面图" align="center" prop="image" >
        <template slot-scope="scope">
          <image-preview :src="scope.row.image" :height="40" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <div slot="footer" class="dialog-footer">
      <el-button type="success" icon="el-icon-check" size="mini" @click="handleSelect">选择</el-button>
      <el-button type="danger" icon="el-icon-close" size="mini" @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listNotinShop } from '@/api/goods/main'
import { treeSelect as optionBrandSelect } from "@/api/goods/brand";
import { treeSelect as optionGTypeSelect } from "@/api/goods/type";

export default {
  dicts: ['sys_normal_disable', 'sys_goods_sj_status'],
  props: {
    deptId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      visible: false,
      title: '选择商品',
      options: {
        brandOptions: [],
        gTypeOptions: [],
      },
      loading: false,
      // 选中数组
      // ids: [],
      // 选中商品编码
      selList: [],
      // 总条数
      total: 0,
      // 本地图片资源地址
      imgServe: process.env.VUE_APP_BASE_API,
      queryParams: {},
      list: []
    }
  },
  methods: {
    resetQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        assNumber: null,
        gNumber: null,
        goodsName: null,
        brandId: null,
        brandIds: null,
        typeId: null,
        typeIds: null,
        status: null,
        params: {
          deptId: this.deptId,
        }
      }
    },
    show() {
      if (this.deptId) {
        this.resetQueryParams();
        this.getBrandTreeSelect();
        this.getGTypeTreeSelect();
        this.getList();
        this.visible = true;
      } else {
        this.$modal.msgError('请先选择店铺')
      }
    },
    /** 查询商品品牌下拉树结构 */
    getBrandTreeSelect() {
      optionBrandSelect().then(response => {
        this.options.brandOptions = response.data;
      });
    },
    /** 查询商品类型下拉树结构 */
    getGTypeTreeSelect() {
      optionGTypeSelect().then(response => {
        this.options.gTypeOptions = response.data;
      });
    },
    /** 查询商品主体信息列表 */
    getList() {
      this.loading = true;
      listNotinShop(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.brandId = this.getLastValueByArray(this.queryParams.brandIds)
      this.queryParams.typeId = this.getLastValueByArray(this.queryParams.typeIds)
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 获取最后一个值 */
    getLastValueByArray(ids) {
      if (ids && ids.length > 0) {
        return ids[ids.length-1];
      } else {
        return null;
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selList = selection.map(item => {
        return {
          gNumber: item.gNumber,
          image: item.image,
          price: item.price,
          goodsName: item.goodsName,
          brandName: item.brandName,
        }
      })
    },
    isSelectable(row, index) {
      if (row.params && row.params.imgId && row.params.imgId > 0) {
        return false;
      }
      return true;
    },
    handleSelect() {
      if (this.selList && this.selList.length > 0) {
        this.visible = false;
        this.$emit("success", this.selList);
      } else {
        this.$modal.msgError("请先选择商品");
      }
    },
    handleCancel() {
      this.visible = false;
    }
  }
}
</script>
